<template>
  <a-popover placement="right" :mouse-enter-delay="0">
    <template v-if="curTeamIndex > 0" #content>
      <template v-if="planData.length === 0">
        <a-alert
          :message="current.format('MM-DD') + '值班'"
          type="info"
          class="cursor-pointer"
          @click="$emit('setPlan', { planType: PlanType.WORKING, current })"
        ></a-alert>
        <a-alert
          :message="current.format('MM-DD') + '休息'"
          type="success"
          class="cursor-pointer !my-3"
          @click="$emit('setPlan', { planType: PlanType.REST, current })"
        ></a-alert>
        <a-alert
          :message="current.format('MM-DD') + '调班'"
          type="warning"
          class="cursor-pointer"
          @click="$emit('setPlan', { planType: PlanType.EXCHANGE, current })"
        ></a-alert>
      </template>
      <a-button v-else danger type="primary" @click="$emit('delPlan', planData[0].id)">删除计划</a-button>
    </template>
    <div class="flex flex-col items-center justify-center h-full" style="min-height: 86px">
      <template v-if="curTeamIndex > 0">
        <a-alert
          v-if="planData.length === 1"
          :message="planTypeToText[planData[0].planType]"
          :type="planTypeToAlertType[planData[0].planType]"
        ></a-alert>
        <span v-else-if="planData.length === 0" class="text-gray-400">未设置</span>
      </template>
      <template v-else>
        <a-tag v-for="el in planData" :key="el.id" :color="planTypeToTagColor[el.planType]" class="!mb-2">
          {{ el.teamName + planTypeToText[el.planType] }}
        </a-tag>
      </template>
    </div>
  </a-popover>
</template>
<script lang="ts" setup>
import type { Dayjs } from "dayjs";
import { ref, watch } from "vue";
import { PlanDataObj, PlanItem, PlanType } from "/@/api/main/teamManage/models";
import { AlertProps } from "ant-design-vue";

const props = defineProps<{
  current: Dayjs;
  planDataObject: PlanDataObj;
  curTeamIndex: number;
}>();

const planData = ref<PlanItem[]>([]);
watch(
  () => props.planDataObject,
  (v) => {
    const dayStr = props.current.format("YYYY-MM-DD");
    const target = v[dayStr];
    if (target && target.length > 0) {
      planData.value = target;
    } else {
      planData.value = [];
    }
  },
  {
    immediate: true,
  }
);

const planTypeToAlertType: { [key: string]: AlertProps["type"] } = {
  [PlanType.WORKING]: "info",
  [PlanType.REST]: "success",
  [PlanType.EXCHANGE]: "warning",
};
const planTypeToTagColor: { [key: string]: string } = {
  [PlanType.WORKING]: "processing",
  [PlanType.REST]: "success",
  [PlanType.EXCHANGE]: "warning",
};
const planTypeToText = {
  [PlanType.WORKING]: "值班",
  [PlanType.REST]: "休息",
  [PlanType.EXCHANGE]: "调班",
};

defineEmits(["setPlan", "delPlan"]);
</script>
